<template>
  <div class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyword" />&nbsp;
      <button @click="searchUsers">Search</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Search",
  data() {
    return {
      keyword: ""
    };
  },
  methods: {
    searchUsers() {
      console.log("Searching for:", this.keyword);
      axios.get(`https://api.github.com/search/users?q=${this.keyword}`)
          .then(response => {
            console.log("Search results:", response.data.items);
            // 发送获取用户事件
            this.$bus.$emit('getUsers', response.data.items);
          })
          .catch(error => {
            console.error("Error searching users:", error);
          });
    }
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>
